<template>
	<div class="content-box with-tabbar">
		<div v-if="orderDetail">
			<u-navbar leftIconColor="#fff" :bgColor="bgColor" :safeAreaInsetTop="true" :placeholder="true" :fixed="true"
				@leftClick="goBack">

			</u-navbar>
			<!-- 页面主内容 状态 -->
			<!--  -->
			<div class="pos-rel  pl-30 mt-100">
				<div v-for="(item, index) in typeList" :key="index"
					v-if="orderDetail.orderStatus === item.value && item.userType.includes(userInfo.userType)">
					<div class="color-fff fontS36 lh-54">{{ item.label }}</div>
					<div class="fontS24 color-fff lh-34 mt-14">{{ item.subtitle }}</div>

					<div class="iconfont pageIcon fontS150" :class="item.icon"></div>
				</div>
			</div>

			<!-- 页面主内容 信息 -->
			<div class="m-40">
				<div v-if="orderDetail.orderStatusName === '待签约'">
					<div class="flex-center bg-fff pl-20 pr-20 lh-100  fontS30 mb-20 bor-r8 bor-f"
						:class="signIndex === index ? 'signCur' : ''" v-for="(item, index) in signTypeList" :key="index"
						@click="changeTab(index)">
						<div>{{ item.title }}</div>
						<div class="iconfont icon-xuanzhong color-green fontS42 ml-auto" v-if="signIndex === index">
						</div>
					</div>
				</div>
				<div v-if="orderDetail.orderStatusName === '已签约'">
					<div class="flex-center bg-fff pl-20 pr-20 lh-100  fontS30 mb-20 bor-r8 bor-f" @click="toPage">
						<div>服务协议</div>
						<div class="iconfont icon-youjiantou ml-auto">
						</div>
					</div>
				</div>

				<div class="bg-fff p-20 bor-r8">
					<div class="flex pb-34 bor-b ">
						<image class="orderImg" :src="baseUrl + orderDetail.carouselImageUrls" mode="asspectFill" />
						<div class="ml-20 pos-rel" style="width: calc(100% - 390upx);">
							<div class="fontE2 color-3 fontS32 lh-42">{{ orderDetail.serveName }}</div>
							<div class="flex align-baseline priceBottom">
								<div class="flex-center align-baseline"
									v-if="orderDetail.priceType === 'fix' || orderDetail.priceType === 'tutor'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										orderDetail.actualPrice }}
									</div>
									<div class="fontS22 color-9 text-decoration-through ml-10"
										v-if="orderDetail.priceType !== 'tutor'">¥{{
											orderDetail.totalPrice }}
									</div>
								</div>
								<div class="flex-center align-baseline" v-if="orderDetail.priceType === 'periodic'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										orderDetail.actualPrice }}
									</div>
									<div class="fontS22 color-9  ml-10"> 元/人/月
									</div>
								</div>
								<div class="flex-center align-baseline"
									v-if="orderDetail.priceType === 'unfix' && orderDetail.actualPrice === 0">
									<div class="color-red fontS32">??</div>
									<div class="fontS22 color-9  ml-10"> 咨询客服改价
									</div>
								</div>

								<div class="flex-center align-baseline"
									v-if="orderDetail.priceType === 'unfix' && orderDetail.actualPrice > 0">
									<div class="color-red fontS32">{{ orderDetail.actualPrice }}</div>

								</div>
							</div>
						</div>
						<div class="ml-auto lh-172 fontS32">x{{ orderDetail.serveNum }}</div>

					</div>
					<div class="flex-center lh-60 mt-20  ">
						<div class="fontS28 color-3">订单编号</div>
						<div class="fontS24 color-6 ml-20">{{ orderDetail.orderNo }}</div>
						<div @click="copyBtn" class="color-green fontS28 pl-20 pr-10 ml-auto">复制</div>
					</div>
					<div class="flex align-center lh-60">
						<div class="color-3 fontS28">订单备注</div>
						<div class="fontS24 color-6 ml-20">{{ orderDetail.remark }}</div>
					</div>
				</div>
				<div class="bg-fff p-20 bor-r8 mt-20">
					<div class="flex align-center lh-60 pb-20  color-3 fontS28 bor-b">
						<div class="">交易方式</div>
						<div class="ml-auto">{{ orderDetail.payChannel === 1 ? '微信' : orderDetail.payChannel ===
							2 ? '支付宝' : '对公支付' }}
						</div>
					</div>
					<div class="flex align-center lh-60 mt-20 color-3 fontS28">
						<div class="">订单时间</div>
						<div class="ml-auto">{{ orderDetail.createTime }}</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="ml-auto flex-center">
					<!-- 待付款 -->
					<div class="bottomBtnCancle ml-32" @click="cancelOrder" v-if="orderDetail.orderStatus === 1">取消订单
					</div>
					<div class="bottomBtnConfirm ml-32" @click="goPay" v-if="orderDetail.orderStatus === 1">去支付</div>
					<!-- 待开始 -->
					<div class="bottomBtnCancle ml-32" @click="toRefund" v-if="orderDetail.orderStatusName === '待开始'">
						退款
					</div>
					<!--  已取消 -->
					<div class="bottomBtnCancle ml-32" @click="deleteOrder"
						v-if="orderDetail.orderStatusName === '已取消'">删除订单
					</div>
					<div class="bottomBtnCancle ml-32" @click="buyAgain"
						v-if="orderDetail.orderStatusName === '已取消' || orderDetail.orderStatusName === '退款中' || orderDetail.orderStatusName === '已退款'">
						再次购买
					</div>
					<!-- 待签约 已签约 服务中 -->
					<div class="bottomBtnCancle ml-32" @click="toRefund"
						v-if="(orderDetail.orderStatusName === '待签约' || orderDetail.orderStatusName === '已签约') && orderDetail.priceType !== 'periodic'">
						退款
					</div>
					<div class="bottomBtnConfirm ml-32" @click="toSign" v-if="orderDetail.orderStatusName === '待签约'">
						去签约
					</div>
					<!-- 服务中已签约已完成 -->
					<div class=" bottomBtnCancle ml-32" @click="toInvoice"
						v-if="(orderDetail.orderStatusName === '服务中' || orderDetail.orderStatusName === '已签约' || orderDetail.orderStatusName === '已完成') && orderDetail.priceType !== 'periodic'">
						开票
					</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
import { appOrderDetail, payApp, orderCancel, orderDelete } from '@/api/order'


export default {
	data() {
		return {
			bgColor: 'transparent',
			baseUrl: getApp().globalData.baseUrl,
			custom: null,
			orderId: '',
			orderDetail: null,
			signIndex: 0,
			signTypeList: [
				{ title: '线上签约', value: 1 },
				{ title: '线下签约', value: 2 },
			],
			typeList: [
				{
					value: 1,
					label: '待付款',
					subtitle: '请及时付款，以便完成后续服务',
					icon: 'icon-a-zhuangtai_huaban1',
					userType: ['02', '03']

				},
				{
					value: 4,
					label: '待开始',
					subtitle: '等待平台确认，确认后即开始服务',
					icon: 'icon-daikaishi-01',
					userType: ['02']

				},
				{
					value: 2,
					label: '待签约',
					subtitle: '您的订单已生成，请尽快签约',
					icon: 'icon-a-zhuangtai_huaban1fuben',
					userType: ['03']
				},
				{
					value: 3,
					label: '已取消',
					subtitle: '订单关闭，如需服务可以点击再次购买',
					icon: 'icon-a-zhuangtai_huaban1fuben',
					userType: ['02', '03']
				},
				{
					value: 4,
					label: '已签约',
					subtitle: '后台审核完成后，将开始为您提供服务',
					icon: 'icon-a-zhuangtai_huaban1fuben2',
					userType: ['03']
				},
				{
					value: 5,
					label: '服务中',
					subtitle: '已开始为您服务',
					icon: 'icon-a-zhuangtai_huaban1fuben3',
					userType: ['02', '03']
				},
				{
					value: 6,
					label: '退款中',
					subtitle: '正在等待平台审核您的退款申请',
					icon: 'icon-a-zhuangtai_huaban1fuben6',
					userType: ['02', '03']
				},
				{
					value: 7,
					label: '已完成',
					subtitle: '订单已完成，感谢您的购买',
					icon: 'icon-a-zhuangtai_huaban1fuben4',
					userType: ['02', '03']
				},
				{
					value: 8,
					label: '已退款',
					subtitle: '退款已按原路返回',
					icon: 'icon-a-zhuangtai_huaban1fuben4',
					userType: ['02', '03']
				},
				// {
				// 	value: 99,
				// 	label: '其他',
				// 	subtitle: '请及时签约',
				// 	icon: 'icon-a-zhuangtai_huaban1fuben4',
				// 	userType: ['02', '03']
				// }
			],
		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},
	onPageScroll(e) {
		if (e.scrollTop > 1) {
			this.bgColor = '#fff'
		} else {
			this.bgColor = 'transparent'
		}

	},
	async onLoad(opt) {
		getApp().globalData.messageRefresh = true
		this.custom = wx.getMenuButtonBoundingClientRect()
		console.log(this.custom)
		this.orderId = opt.orderId
		await this.getDetail()
	},
	async onShow() {
		await this.getDetail()
	},
	async onPullDownRefresh() {
		await this.getDetail()
		uni.stopPullDownRefresh()
	},


	methods: {
		copyBtn() {
			uni.setClipboardData({
				data: this.orderDetail.orderNo,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				},

			});
		},
		goBack() {
			uni.navigateBack({
				delta: 1,
				fail() {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			})
		},

		async getDetail() {
			const { data } = await appOrderDetail(this.orderId)
			this.orderDetail = data
		},
		toPage() {
			uni.downloadFile({
				url: this.baseUrl + this.orderDetail.contractUrl,
				success: (res) => {
					console.log(res)
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							fileType: this.orderDetail.contractUrl.split('.')[this.orderDetail.contractUrl.split('.').length - 1], // 可以是doc, docx, xls, xlsx, ppt, pptx, pdf
							success: function (res) {

								uni.setClipboardData({
									data: this.baseUrl + this.orderDetail.contractUrl,
									success: () => {
										uni.showToast({
											title: '复制成功，请在浏览器打开保存',
											icon: 'none'
										});
									},
									fail: (err) => {
										console.error('复制失败:', err);
										uni.showToast({
											title: '复制失败',
											icon: 'none'
										});
									}
								});
								// 用户可以从预览界面选择"保存到手机"
							},
							fail: function (err) {
								console.error('打开失败', err);
								uni.showToast({ title: '打开文件失败', icon: 'none' });
							}
						});
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('下载失败', err);
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			});
			// uni.navigateTo({
			// 	url: `/pages/webView/webView?url=${encodeURIComponent(this.baseUrl + this.orderDetail.contractUrl)}`
			// })
		},
		changeTab(index) {
			this.signIndex = index
		},
		// 再次购买
		buyAgain() {
			uni.navigateTo({
				url: `/pages/service/serviceDetail?serveId=${this.orderDetail.serveId}`
			})
		},
		// 开票
		toInvoice() {
			uni.navigateTo({
				url: `/pages/order/invoicing?id=${this.orderDetail.id}&orderNo=${this.orderDetail.orderNo}`
			})
		},
		// 退款

		toRefund() {

			uni.navigateTo({
				url: `/pages/order/cancelCheck?id=${this.orderDetail.id}&orderNo=${this.orderDetail.orderNo}&price=${this.orderDetail.price}`
			})
		},
		// 去签约
		toSign() {
			if (this.orderDetail.contractUrl) {
				uni.showToast({ title: '您已提交签约合同，请等待审核', icon: 'none' })
				return false;
			}
			if (this.signIndex === 0) {
				uni.navigateTo({
					url: `/pages/order/orderSignLine?id=${this.orderDetail.id}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/order/orderSignOffLine?id=${this.orderDetail.id}`
				})
			}
		},
		// 取消订单
		cancelOrder() {
			uni.showModal({
				content: '是否确定取消订单？',
				success: res => {
					if (res.confirm) {
						orderCancel({
							id: this.orderDetail.id,
							serveId: this.orderDetail.serveId,
							userType: this.userInfo.userType,

						}).then(res => {
							this.getDetail();
						})
					}
				},
				fail: () => { },
				complete: () => { }
			});
		},
		// 删除订单
		deleteOrder() {
			uni.showModal({
				content: '是否确定删除订单？',
				success: res => {
					if (res.confirm) {
						orderDelete(this.orderDetail.id).then(res => {
							uni.navigateTo({
								url: '/pages/order/allOrder'
							})
						})
					}
				},
				fail: () => { },
				complete: () => { }
			});
		},
		// 立即支付
		async goPay() {

			let _this = this;
			if (this.orderDetail.actualPrice <= 0) {
				uni.showToast({ title: '请联系客服改价', icon: 'none' })
				return false
			}
			if (_this.orderDetail.payChannel === 3) {
				if (_this.orderDetail.payUrl) {
					uni.showToast({ title: '您已提交，请等待审核', icon: 'none' })
				} else {
					uni.navigateTo({
						url: `/pages/order/uploadVoucher?serveId=${this.orderDetail.serveId}&tutorId=${this.orderDetail.tutorId ? this.orderDetail.tutorId : ''}&num=${this.orderDetail.serveNum}&orderId=${this.orderId}`
					})

				}
			} else {
				await _this.pay()
			}


		},
		async pay() {
			let _this = this;
			let paramPay = {
				openId: this.userInfo.openId,
				orderId: this.orderDetail.id,
				payMethod: '1',
				wxPayType: '1',

			}
			await payApp(paramPay).then(res => {
				let _this = this;
				console.log(res)
				let {

					nonceStr,
					packageVal,
					paySign,
					signType,
					timeStamp
				} = res.data.appletPayData

				// let payData = {}
				let payData = {
					success: function (res) {
						console.log(res)
						let isSuccess = true;
						//#ifdef MP-TOUTIAO
						if (res.code != 0) {
							isSuccess = false;
						}
						//#endif
						if (isSuccess) {
							console.log('支付成功')
							_this.getDetail()

						} else {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
						}

						console.log('success:' + JSON.stringify(res));
					},
					fail: function (err) {

						// uni.showToast({
						// 	title:"支付失败",
						// 	icon:"none"
						// })
						console.log('fail:' + JSON.stringify(err));
					}
				};


				//#ifdef MP-WEIXIN
				payData.timeStamp = timeStamp;
				payData.nonceStr = nonceStr;
				payData.package = packageVal;
				payData.signType = signType;
				payData.paySign = paySign
				//#endif
				// 调起微信支付
				uni.requestPayment(payData)
			})

		},
		goDetail(item) {
			uni.navigateTo({
				url: '/pages/order/detail?orderId=' + item.id
			})
		},
		tabClick(item, index) {
			this.tabIndex = index
			this.queryForm.orderStatus = item.value
			this.queryForm.pageNum = 1
			this.getList()

		},
	}
};
</script>
<style lang="less" scoped>
@import url(order.less);

.content-box {
	height: 100vh;
	overflow: auto;


	background-image: url('https://xingangtong.oss-cn-beijing.aliyuncs.com/user/订单背景@3x.png');
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
}
</style>
